<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;

    }

    .wrap {
      width: 80%;
      margin: 20px auto;
    }

    .wrap .list {
      width: 80%;
      margin: 20px auto;
    }

    .list_one {
      display: flex;
      height: 280px;
      align-items: center;
      border-bottom: 1px solid red;
    }

    .list_one img {
      width: 200px;
      height: 200px;
    }

    span {
      font-size: 20px;
    }

    .sel_list {
      display: flex;

    }

    .sel_list a {
      margin-left: 20px;
    }
  </style>
</head>

<body>
  <div class="wrap">
    模特分类：<div class="sel_list">

    </div>
    <ul class="list">
      <!-- <li class="list_one">
        <div>
          名字：<span>民治</span>
          <img src="" alt="">
        </div>
        <div>
          身高：<span>132</span> 体重：<span></span>
          粉丝数：<span></span>
        </div>
      </li> -->
    </ul>
  </div>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>

    // 加载模特分类接口
    function loadSel() {
      $.ajax({
        url: "http://route.showapi.com/126-1",
        type: "get",
        data: {
          showapi_appid: "634138", //id 
          showapi_sign: "48086ee4b74440a98dfa5f1132520981",   //秘钥
        },
        success: function (res) {
          console.log(res)
          var data = res.showapi_res_body.allTypeList //获取到分类数组
          var str = ``;
          $.each(data, function (index, ele) {
            str += `<a href="#">${ele}</a>`
          })
          $(".sel_list").html(str);
        }
      })
    }

    loadSel()
    // 加载模特列表
    function loadMote(type) {
      $.ajax({
        url: "http://route.showapi.com/126-2",
        type: "get",
        data: {
          showapi_appid: "634138", //id 
          showapi_sign: "48086ee4b74440a98dfa5f1132520981",   //秘钥
          type: type  //模特分类 需要传送的数据
        },
        success: function (res) {
          console.log(res)
          var data = res.showapi_res_body.pagebean.contentlist; //模特列表数组
          var str = ``;
          $.each(data, function (index, ele) {
            str += ` <li class="list_one">
            <div>
              名字：<span>${ele.realName}</span>
              <img src="${ele.avatarUrl}" alt="">
            </div>
            <div>
              身高：<span>${ele.height}</span> 体重：<span>${ele.weight}</span>
              粉丝数：<span>${ele.totalFanNum}</span>
              <br/>
              所在城市：<span>${ele.city}</span>
            </div>
          </li>`
          })
          $(".list").html(str);
        }
      })


    }
    loadMote();
    // 点击切换分类
    $(".sel_list").on("click", "a", function () {

      var type = $(this).html() //当前点击的分类的值
      loadMote(type)
    })
  </script>
</body>

</html>